<template>
	<view class="container">
		<view class="user-section header">
			<view class="user-info-box">
				<image class="portrait" @tap="navTo('/pages_Me/bash/bash')" :src="userInfo.headPortrait||defaultFace">
				</image>
				<view class="info-box">
					<view v-if="hasLogin">
						<view class="nickname">{{userInfo.nickname || '您还没有设置昵称'}}</view>
						<view class="guanzhu">
							<text>关注: 0</text>
							<text>粉丝: 0</text>
						</view>
					</view>
					<text v-else class="username" @tap="navTo('/pages_Me/login/login')">登录/注册</text>
					<view class="">
						<text class="iconfont change" @tap="navTo('/pages_Me/bash/bash')"></text>
						<text class="iconfont set" style="margin-left: 20rpx;"
							@tap="navTo('/pages_Me/setting/setting')"></text>
					</view>
				</view>
			</view>
		</view>

		<view class="cover-container">

			<view class="tj-sction">
				<view class="tj-item">
					<text class="num">0</text>
					<text>积分</text>
				</view>
				<view class="tj-item" @click="navTo('../../pages_Me/coupon/coupon')">
					<text class="num">0</text>
					<text>收藏</text>
				</view>
				<view class="tj-item">
					<text class="num">0</text>
					<text>浏览历史</text>
				</view>
				<view class="tj-item">
					<text class="num">0</text>
					<text>优惠券</text>
				</view>
			</view>
			<!-- 订单 -->
			<view class="card">
				<view class="order_title">
					<view class="myOrder">我的订单</view>
					<view class="more" @tap="navTo('/pages_Index/order/order?state=0')">全部订单<text
							class="iconfont icon-you" style="font-size:31rpx;font-weight: 400;"></text></view>
				</view>
				<view class="order-list">
					<navigator class="order-item" url="/pages_Index/order/order?state=1" open-type="navigate"
						hover-class="common-hover" :hover-stay-time="50">
						<text class="iconfont daifukuan2 f-30"
							style="font-weight: 700;color:#FF6575 ;margin-top: 25rpx;"></text>
						<text class="p-t-5">待付款</text>
					</navigator>
					<navigator class="order-item" url="/pages_Index/order/order?state=1" open-type="navigate"
						hover-class="common-hover" :hover-stay-time="50">
						<text class="iconfont daifahuo f-24"
							style="font-weight: 700;color:#FF6575 ;margin-top: 30rpx;"></text>
						<text class="p-t-5" style="margin-top: 6rpx;">代发货</text>
					</navigator>
					<navigator class="order-item" url="/pages_Index/order/order?state=2" open-type="navigate"
						hover-class="common-hover" :hover-stay-time="50">
						<text class="iconfont daishouhuo01 f-30"
							style="font-weight: 700;color:#FF6575 ;margin-top: 25rpx;"></text>
						<text class="p-t-5">待收货</text>
					</navigator>
					<navigator class="order-item" url="/pages_Index/order/order?state=3" open-type="navigate"
						hover-class="common-hover" :hover-stay-time="50">
						<text class="iconfont daipingjia f-28"
							style="font-weight: 700;color:#FF6575 ;margin-top: 25rpx;"></text>
						<text class="p-t-5">待评价</text>
					</navigator>
					<navigator class="order-item" url="/pages_Index/order/order?state=4" open-type="navigate"
						hover-class="common-hover" :hover-stay-time="50">
						<text class="iconfont shouhouwuyou f-28"
							style="font-weight: 700;color:#FF6575 ;margin-top: 25rpx;"></text>
						<text class="p-t-5">退款/售后</text>
					</navigator>
				</view>
			</view>


			<!-- 我的服务 -->
			<view class="card">
				<view class="order_title">
					<view class="myOrder">我的服务</view>
				</view>
				<view class="order-list" style="flex-wrap: wrap;">
					<view class="order-item" @tap="navTo(item.pages)" v-for="item in serviceBar" :key="item.title"
						open-type="navigate" hover-class="common-hover" :hover-stay-time="50" style="width: 24%;">
						<text :class="item.icon" style="color:#787676 ;margin-top: 25rpx;"></text>
						<text class="p-t-5" style="color:#787676;">{{item.title}}</text>
					</view>
				</view>
			</view>

		</view>

		<tabbar :menuList="tabbarData" :value="3"></tabbar>
	</view>
</template>
<script>
	import {
		getWxOpenId
	} from "@/common/http/api.js";
	let w = uni.getSystemInfoSync().windowWidth;
	let h = uni.getSystemInfoSync().windowHeight;
	import myService from "../../common/myService";
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		components: {

		},
		data() {
			return {
				topbar: 50,
				defaultFace: '/static/img/user/missing-face.png',
				isLoading: false,
				serviceBar: myService
			}
		},
		onLoad() {
			this.topbar = getApp().globalData.customBar;
		},
		onReady() {
			this.isLoading = true;
		},
		onShow() {
			// this.userInfo =uni.getStorageSync("userInfo");
		},
		// #ifndef MP
		onNavigationBarButtonTap(e) {
			const index = e.index;
			if (index === 0) {
				this.navTo('/pages/user/setting/setting');
			} else if (index === 1) {
				// #ifdef APP-PLUS
				const pages = getCurrentPages();
				const page = pages[pages.length - 1];
				const currentWebview = page.$getAppWebview();
				currentWebview.hideTitleNViewButtonRedDot({
					index
				});
				// #endif
				uni.navigateTo({
					url: '/pages/notice/notice'
				})
			}
		},
		// #endif

		computed: {
			...mapState(['hasLogin', 'userInfo', 'tabbarData'])
		},
		methods: {
			...mapMutations(['login']),
			navTo(url) {
				if (this.hasLogin) {
					uni.$u.route(url)
				} else {
					uni.navigateTo({
						url: '/pages_Me/login/login'
					});
				}
			},

			onadload(e) {
				this.isLoading = false;
				console.log('广告数据加载成功');
			}
		}
	}
</script>
<style lang='scss' scoped>
	.container {
		width: 100vw;
		min-height: 100vh;
		background: linear-gradient(180deg, #FFEAE8 0%, #FFFFFF 100%);
	}

	.ad-error {
		color: orangered;
		margin-top: 5px;
	}

	%flex-center {
		display: flex;
		flex-direction: start;
		justify-content: center;
		align-items: center;
	}

	%section {
		display: flex;
		justify-content: space-around;
		align-content: center;
		background: #fff;
		border-radius: 10upx;
	}

	.user-section {
		/* height: 520upx; */
		padding: 60upx 30upx 0;
		position: relative;


	}

	.bg {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		filter: blur(1px);


	}

	.user-info-box {
		height: 180rpx;
		display: flex;
		margin-top: 88rpx;
		align-items: center;
		position: relative;
		z-index: 1;
	}

	.portrait {
		width: 128upx;
		height: 128upx;
		border-radius: 50%;
		flex-shrink: 0;
	}

	.info-box {
		margin-left: 12rpx;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		width: 100%;
	}

	.nickname {
		font-size: 29rpx;
		color: #666666;
	}

	.guanzhu {
		width: 193rpx;
		height: 27rpx;
		font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
		font-weight: 400;
		font-size: 24rpx;
		color: #979797;
		margin-top: 18rpx;
		display: flex;
		justify-content: space-between;
	}

	.username {
		font-size: $font-lg + 4upx;
		color: $font-color-dark;
		margin-left: 20upx;
		font-weight: bold;
	}

	.vip-card-box {
		display: flex;
		flex-direction: column;
		color: #f7d680;
		height: 240upx;
		background: linear-gradient(to right, rgba(0, 0, 0, .7), rgba(0, 0, 0, .8));
		border-radius: 16upx 16upx 0 0;
		overflow: hidden;
		position: relative;
		padding: 20upx 24upx;

	}

	.card-bg {
		position: absolute;
		top: 20upx;
		right: 0;
		width: 380upx;
		height: 260upx;
	}

	.b-btn {
		position: absolute;
		right: 20upx;
		top: 16upx;
		width: 132upx;
		height: 40upx;
		text-align: center;
		line-height: 40upx;
		font-size: 22upx;
		color: #36343c;
		border-radius: 20px;
		background: linear-gradient(to right, #f9e6af, #ffd465);
		z-index: 1;
	}

	.tit {
		font-size: $font-base+2upx;
		color: #f7d680;
		margin-bottom: 28upx;

		[class*="hxicon-"] {
			color: #f6e5a3;
			margin-right: 16upx;
		}
	}

	.e-b {
		font-size: $font-sm;
		color: #d8cba9;
		margin-top: 10upx;
	}

	.cover-container {
		padding: 0 30upx;
		position: relative;
		padding-bottom: 20upx;

	}

	.arc {
		position: absolute;
		left: 0;
		top: -34upx;
		width: 100%;
		height: 36upx;
	}

	.tj-sction {
		@extend %section;
		background-color: transparent !important;

		.tj-item {
			@extend %flex-center;
			flex-direction: column;
			height: 140upx;
			font-size: $font-sm;
			color: #75787d;
		}

		.num {
			font-size: $font-lg;
			color: $font-color-dark;
			margin-bottom: 8upx;
			font-weight: 700;
		}
	}

	.order_title {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.myOrder {
			font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
			font-weight: 700;
			font-size: 30rpx;
			color: #333333;
		}

		.more {
			width: 22%;
			display: flex;
			align-items: center;
			justify-content: space-between;

			font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
			font-weight: 700;
			font-size: 24rpx;
			color: #979797;
		}
	}

	.order-list {
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		margin-top: 14rpx;
	}

	.order-item {
		@extend %flex-center;
		width: 120upx;
		height: 120upx;
		border-radius: 10upx;
		font-size: $font-sm;
		color: $font-color-dark;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-top: 10px;
	}

	[class*="hxicon-"] {
		font-size: 48upx;
		margin-bottom: 18upx;
		color: #ffd21c;
	}

	.icon-shouhoutuikuan {
		font-size: 44upx;
	}

	.history-section {
		padding: 30upx 0 0;
		margin-top: 20upx;
		background: #fff;
		border-radius: 10upx;

	}

	.sec-header {
		display: flex;
		align-items: center;
		font-size: $font-base;
		color: $font-color-dark;
		line-height: 40upx;
		margin-left: 30upx;

		[class*="hxicon-"] {
			font-size: 44upx;
			color: #5eba8f;
			margin-right: 16upx;
			line-height: 40upx;
		}
	}

	.h-list {
		white-space: nowrap;
		padding: 30upx 30upx 0;

		image {
			display: inline-block;
			width: 160upx;
			height: 160upx;
			margin-right: 20upx;
			border-radius: 10upx;
		}
	}

	.header {
		position: relative;
	}

	.headertop {
		position: absolute;
		top: 10px;
		z-index: 10;
	}

	.registerBox {
		width: 100%;
		min-height: 160px;
		background: linear-gradient(to bottom, #FEE3DA, #fff);
		border-radius: 15px 15px 0 0;
		padding: 10px 5%;
	}

	.codeclass {
		width: 80%;
		background: #fff;
		height: 30px;
		padding: 5px 10px;
		line-height: 30px;
		margin-left: 10%;
		border-radius: 5px;

		input {
			height: 25px;
		}
	}
</style>